<template>
  <div class="inb txt-left width-1800">
    <div class="common-date">
      <Form label-position="left" ref="formCustom" :model="overviewForm" :label-width="80"
            class="condition-form col-fff" inline>
        <FormItem label="空间选择：" prop="spaceValue">
          <Tooltip :content="workSpaceTip" placement="top">
            <Cascader :data="ensTreeData" v-model="overviewForm.spaceValue" change-on-select
                      :clearable="false" @on-change="changeWorkSpace"
                      style="width: 350px;"></Cascader>
          </Tooltip>
        </FormItem>
      </Form>
    </div>
    <div v-if="currentTab === 'chart'">
      <div class="chart-wrap mar-bot-ss">
        <div class="chart-content">
          <div class="mar-bot-m">
            <div class="inb-start char-title-line"></div>
            <span class="font-ll char-title">汇总能耗</span>
          </div>
          <Row class="chart-row font-m col-fff mar-bot-ss" :gutter="10">
            <i-col span="6" class="hei100 chart-item mar-bot-ss"
                   v-for="(allin, index) of carbon_allin_list" :key="index">
              <overview-cell :count="allin.useNum" :unit="allin.unit" :title="allin.type"
                             :progress="allin.percent"></overview-cell>
            </i-col>
          </Row>
        </div>
      </div>
      <div class="chart-wrap">
        <div class="chart-content">
          <div class="mar-bot-m">
            <div class="inb-start char-title-line"></div>
            <span class="font-ll char-title">单车能耗</span>
          </div>
          <Row class="chart-row font-m col-fff mar-bot-ss" :gutter="10">
            <i-col span="6" class="hei100 chart-item mar-bot-ss"
                   v-for="(allin, index) of carbon_avgs_list" :key="index">
              <overview-cell :count="allin.useNum" :unit="allin.unit" :title="allin.type"
                             :progress="allin.percent"></overview-cell>
            </i-col>
          </Row>
        </div>
      </div>
    </div>
    <div v-else>
      <div class="m-dark-table flexBox wh100">
        <div class="table-content">
          <div class="txt-center mar-bot-m">
            <span class="font-m col-fff">上半{{filterDate}}</span>
          </div>
          <i-table stripe size="small" :columns="columns1" :data="tableData1"></i-table>
        </div>
        <div class="table-content">
          <div class="txt-center mar-bot-m">
            <span class="font-m col-fff">下半{{filterDate}}</span>
          </div>
          <i-table stripe size="small" :columns="columns1" :data="tableData2" width=""></i-table>
        </div>
      </div>
      <div class="export-foot">
        <ul class="font-m col-fff dosage-list">
          <li>汇总量</li>
          <li>用水量 <span>{{monthTotal.water}}</span> m³</li>
          <li>用电量 <span>{{monthTotal.electricity}}</span> kw·h</li>
          <li>燃气量 <span>{{monthTotal.gas}}</span> Nm³</li>
          <li>用热量 <span>{{monthTotal.heat}}</span> kcal</li>
          <li>空气量 <span>{{monthTotal.airPress}}</span> Nm³</li>
          <li>蒸汽量 <span>{{monthTotal.steam}}</span> m³</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import OverviewCell from '../../../components/cell/overviewCell'
  import transformFilters from '../../../util/transformFilters'
  import {mapState} from 'vuex'

  export default {
    name: 'energyOverview',
    directives: {},
    components: {OverviewCell},
    mixins: [transformFilters],
    data () {
      return {
        carbon_allin_list: [],
        carbon_avgs_list: [],
        columns1: [
          {
            title: '时段',
            key: 'time',
            width: 180
          },
          {
            title: '用水 m³',
            key: 'water'
          },
          {
            title: '用电 kw-h',
            key: 'electricity'
          },
          {
            title: '燃气 Nm',
            key: 'gas'
          },
          {
            title: '用热 kcal',
            key: 'heat'
          },
          {
            title: '空气 Nm³',
            key: 'airPress'
          },
          {
            title: '蒸汽 m³',
            key: 'steam'
          }
        ],
        // monthTotal 月汇总量
        monthTotal: {
          gas: '',
          airPress: '',
          steam: '',
          heat: '',
          electricity: '',
          water: ''
        },
        tableData: [],
        tableData1: [],
        tableData2: []
      }
    },
    props: {},
    computed: {
      ...mapState('comDate', {
        activeDate: state => state.activeDate,
        currentTab: state => state.currentTab
      }),
      filterDate () {
        if (this.activeDate.length > 0 && this.activeDate.length <= 4) {
          return '年'
        } else if (this.activeDate.length > 4 && this.activeDate.length <= 7) {
          return '月'
        } else {
          return '天'
        }
      }
    },
    watch: {},
    methods: {
      init () {
        let self = this
        self.ensTree({type: '总览', factory: 'ZZ'}, function () {
          self.refreshData()
        })
      },
      // xxx能耗总揽--汇总
      post_carbon_allin (time, workSpace) {
        let self = this
        new window.Api(
          {
            ...{id: new window.Api().totalOverview},
            ...{
              time: time,
              workSpace: workSpace
            }
          }, 'POST').getData().then(function (res) {
          if (res.data.status === 200) {
            self.carbon_allin_list = res.data.jsData.total
            self.carbon_avgs_list = res.data.jsData.bicycle
          }
        }).catch(function (e) {
          console.log(e)
        })
      },
      post_form (time, workSpace) {
        new window.Api(
          {
            ...{id: new window.Api().postForm},
            ...{
              time: time,
              workSpace: workSpace
            }
          }, 'POST').getData().then((res) => {
          // console.log(res)
          if (res.data.status === 200) {
            this.tableData = res.data.jsData.datas
            let table = this.tableData.slice()
            let monthTotal = table.splice(table.length - 1, 1)
            // this.monthTotal = monthTotal.find(v => v.time === '累积量')
            this.monthTotal = monthTotal[0]
            let center = Math.ceil(table.length / 2)
            this.tableData2 = table.splice(center)
            this.tableData1 = table
          } else {
          }
        }).catch(function (e) {
          // console.log(e)
        })
      },
      // 刷新数据
      refreshData () {
        let self = this
        self.post_carbon_allin(self.activeDate, self.workSpaceString)
        // self.post_carbon_avgs(self.activeDate, self.workSpaceString)
        self.post_form(self.activeDate, self.workSpaceString)
      }
    },
    beforeCreate () {
    },
    created () {
      this.init()
    },
    destroyed () {
    },
    mounted () {
      this._timerFun(10000)
    }
  }
</script>
<style scoped>
  .m-dark-table {
    justify-content: space-between;
  }

  .chart-wrap {
    width: 100%;
    /*height: 400px;*/
    min-height: 400px;
    background-color: #172E67;
  }

  .chart-content {
    padding: 25px 30px 40px;
    width: 100%;
    height: 100%;
  }

  .chart-row {
    height: 140px;
  }

  .chart-item > div {
    background-color: #101F47;
    height: 100%;
  }

  .char-title-line {
    height: 18px;
    width: 3px;
    margin: 6px 18px 0 4px;
    background-color: #43CCBA;
  }

  .char-title {
    color: #7da1ff;
  }

  .table-content {
    width: calc(50% - 5px);
  }

  .export-foot {
    background-color: #14265A;
    width: 100%;
    height: 70px;
    margin-top: 9px;
  }

  .export-foot .dosage-list {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .export-foot .dosage-list li {
    width: 14%;
    text-align: center;
  }
</style>
